<template>
	<view class="register-container">
		<view class="register-header">
			<text class="title">用户注册</text>
			<text class="subtitle">加入接单平台，开启技术服务之旅</text>
		</view>
		
		<view class="register-form">
			<view class="form-item">
				<text class="label">用户名</text>
				<input 
					class="input" 
					type="text" 
					placeholder="请输入用户名" 
					v-model="form.username"
					:disabled="loading"
				/>
			</view>
			
			<view class="form-item">
				<text class="label">密码</text>
				<input 
					class="input" 
					type="password" 
					placeholder="请输入密码" 
					v-model="form.password"
					:disabled="loading"
				/>
			</view>
			
			<view class="form-item">
				<text class="label">确认密码</text>
				<input 
					class="input" 
					type="password" 
					placeholder="请再次输入密码" 
					v-model="form.confirmPassword"
					:disabled="loading"
				/>
			</view>
			
			<view class="form-item">
				<text class="label">真实姓名</text>
				<input 
					class="input" 
					type="text" 
					placeholder="请输入真实姓名" 
					v-model="form.realName"
					:disabled="loading"
				/>
			</view>
			
			<view class="form-item">
				<text class="label">手机号码</text>
				<input 
					class="input" 
					type="number" 
					placeholder="请输入手机号码" 
					v-model="form.phone"
					:disabled="loading"
				/>
			</view>
			
			<view class="form-item">
				<text class="label">用户类型</text>
				<picker 
					:range="roleOptions" 
					range-key="name"
					:value="roleIndex"
					@change="onRoleChange"
					:disabled="loading"
				>
					<view class="picker">
						{{ roleOptions[roleIndex].name }}
					</view>
				</picker>
			</view>
			
			<button 
				class="register-btn" 
				:disabled="loading || !canSubmit"
				@click="handleRegister"
			>
				{{ loading ? '注册中...' : '立即注册' }}
			</button>
			
			<view class="register-footer">
				<text class="login-link" @click="goLogin">已有账号？立即登录</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					username: '',
					password: '',
					confirmPassword: '',
					realName: '',
					phone: '',
					roleType: 3
				},
				loading: false,
				roleIndex: 0,
				roleOptions: [
					{ name: '用户（发布需求）', value: 3 },
					{ name: '技术员（接单服务）', value: 4 }
				]
			}
		},
		computed: {
			canSubmit() {
				return this.form.username.trim() && 
					   this.form.password.trim() && 
					   this.form.confirmPassword.trim() &&
					   this.form.realName.trim() &&
					   this.form.phone.trim() &&
					   this.form.password === this.form.confirmPassword
			}
		},
		methods: {
			onRoleChange(e) {
				this.roleIndex = e.detail.value
				this.form.roleType = this.roleOptions[this.roleIndex].value
			},
			
			async handleRegister() {
				if (!this.canSubmit) {
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none'
					})
					return
				}
				
				if (this.form.password !== this.form.confirmPassword) {
					uni.showToast({
						title: '两次密码不一致',
						icon: 'none'
					})
					return
				}
				
				if (!/^1[3-9]\d{9}$/.test(this.form.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				}
				
				this.loading = true
				
				try {
					const registerData = {
						username: this.form.username.trim(),
						password: this.form.password.trim(),
						realName: this.form.realName.trim(),
						phone: this.form.phone.trim(),
						roleType: this.form.roleType
					}
					
					await this.$api.register(registerData)
					
					uni.showToast({
						title: '注册成功',
						icon: 'success'
					})
					
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
					
				} catch (error) {
					uni.showToast({
						title: error.message || '注册失败',
						icon: 'none'
					})
				} finally {
					this.loading = false
				}
			},
			
			goLogin() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.register-container {
		min-height: 100vh;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		padding: 60rpx;
	}
	
	.register-header {
		text-align: center;
		margin-bottom: 80rpx;
		
		.title {
			display: block;
			font-size: 48rpx;
			font-weight: bold;
			color: #fff;
			margin-bottom: 20rpx;
		}
		
		.subtitle {
			display: block;
			font-size: 28rpx;
			color: rgba(255, 255, 255, 0.8);
		}
	}
	
	.register-form {
		.form-item {
			margin-bottom: 40rpx;
			
			.label {
				display: block;
				color: rgba(255, 255, 255, 0.9);
				font-size: 28rpx;
				margin-bottom: 20rpx;
			}
			
			.input {
				width: 100%;
				height: 88rpx;
				background: rgba(255, 255, 255, 0.9);
				border-radius: 44rpx;
				padding: 0 40rpx;
				font-size: 28rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
			}
			
			.picker {
				width: 100%;
				height: 88rpx;
				background: rgba(255, 255, 255, 0.9);
				border-radius: 44rpx;
				padding: 0 40rpx;
				font-size: 28rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				line-height: 88rpx;
			}
		}
		
		.register-btn {
			width: 100%;
			height: 88rpx;
			background: linear-gradient(45deg, #FF6B6B, #FF8E53);
			color: #fff;
			border: none;
			border-radius: 44rpx;
			font-size: 32rpx;
			font-weight: bold;
			margin-top: 40rpx;
			
			&:disabled {
				opacity: 0.6;
			}
		}
		
		.register-footer {
			text-align: center;
			margin-top: 60rpx;
			
			.login-link {
				color: rgba(255, 255, 255, 0.9);
				font-size: 28rpx;
			}
		}
	}
</style>